<%@ page import="com.homestay.beans.Vip" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新增会员 </title>
    <link rel="stylesheet" href="../views/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="../views/static/admin/css/style.css">
    <script src="../views/static/common/layui/layui.js"></script>
    <script src="../views/static/common/jquery-3.3.1.min.js"></script>
    <script src="../views/static/common/vue.min.js"></script>
    <%--    获取系统时间--%>
    <script>
        window.onload = function(){
            function getDate(){
                debugger;
                var today = new Date();
                var date;
                date = (today.getFullYear()) +"-" + (today.getMonth() + 1 ).toString().padStart(2,"0") + "-" + today.getDate().toString().padStart(2,"0") ;
                return date;
            }
            window.setInterval(function(){
                document.getElementById("getTime").value=getDate();
            }, 1000);
        }

        function ckCard() {
            var card = $("input[name='card']").val().trim();

            if (card.length != 18 && card.length != 15) {
                $("input[name='card']").next("span").text("身份证号长度不正确");
                return false;
            }
            // 正则表达式验证身份证号
            var reg = /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/;
            if (!reg.test(card)) {
                $("input[name='card']").next("span").text("身份证号格式不正确");
                return false;
            }
            $("input[name='card']").next("span").text("");
            return true;
        }

        function ckPhone(){
            var phone = $("input[name='phone']").val().trim();
            if (phone.length != 11) {
                $("input[name='phone']").next("span").text("手机号长度不正确");
                return false;
            }
            // 正则表达式验证手机号
            var reg = /^1[3-9]\d{9}$/;
            if (!reg.test(phone)) {
                $("input[name='phone']").next("span").text("手机号格式不正确");
                return false;
            }
            $("input[name='phone']").next("span").text("");
            return true;
        }

        function ckTime() {
            var startTime = $("input[name='startTime']").val();
            var endTime = $("input[name='endTime']").val();
            // console.log("开通时间：" + startTime + ", 到期时间：" + endTime + "ckTime:" + (new Date(startTime) >= new Date(endTime)));
            if (startTime && endTime) {
                if (new Date(startTime) >= new Date(endTime)) {
                    $("input[name='endTime']").next("span").text("到期时间必须大于开通时间");
                    return false;
                }
                $("input[name='endTime']").next("span").text("");
                return true;
            }
            return false;
        }

        function ckAll() {
            return ckCard() && ckPhone() && ckTime();
        }
    </script>
</head>
<body>
<div >
    <!--顶栏-->
    <jsp:include page="../top.jsp"/>

    <div class="main" id="app">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;"  :class="{active:vo.active}"  @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>新增会员</legend>
            </fieldset>


            <form class="layui-form " action="/VipServlet.do" method="post" target="_self" onsubmit="return ckAll();">

                <c:set var="v" value="${requestScope.vip}"/>
                <input type="hidden" name="action" value="add"/>

                <div class="layui-form-item">

                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">

                        <input type="text" name="name" required  placeholder="请输入姓名" autocomplete="off" class="layui-input" value="${v.name}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <select name="sex" class="layui-input" autocomplete="off" required >
                            <option value="男" ${v.sex=="男"?"selected":""}>男</option>
                            <option value="女" ${v.sex=="女"?"selected":""}>女</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-block">
                        <input type="text" name="card" onblur="ckCard();" required placeholder="请填写身份证号" autocomplete="off" class="layui-input" value="${v.card}">
                        <span style="color: red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" onblur="ckPhone();" required placeholder="请填写手机号" autocomplete="off" class="layui-input" value="${v.phone}">
                        <span style="color: red"></span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">会员类型</label>
                    <div class="layui-input-block">
                        <select name="v_type" class="layui-input" autocomplete="off" required >
                            <option value=""></option>
                            <option value="初级会员" ${v.v_type=="初级会员"?"selected":""}>初级会员</option>
                            <option value="中级会员" ${v.v_type=="中级会员"?"selected":""}>中级会员</option>
                            <option value="高级会员" ${v.v_type=="高级会员"?"selected":""}>高级会员</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="getTime">开通时间</label>
                    <div class="layui-input-block">
                        <input type="date" name="startTime" required  id="getTime" autocomplete="off" class="layui-input" value="${v.startTime}" onclick="this.showPicker()">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="EndTime" >到期时间</label>
                    <div class="layui-input-block">
                        <input type="date" name="endTime" id="EndTime" required   autocomplete="off" class="layui-input" onchange="ckTime()" value="${v.endTime}" onclick="this.showPicker()">
                        <span style="color: red"></span>
                        <span style="color: red">${requestScope.msg}</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" type="submit">立即提交</button>
                        <button class="layui-btn layui-btn-danger" type="reset">清空内容</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<script src="../views/static/admin/js/config.js"></script>
<script src="../views/static/admin/js/script.js"></script>
</body>
</html>
